<template>
  <view class="ganzhi-containter">
    <view class="ganzhi_item" style="background-color: #f6f6f6">
      <view class="ganzhi_title" v-for="(item, index) in shizhu" :key="index">{{
        item
      }}</view>
    </view>
    <view class="ganzhi_item">
      <view class="ganzhi_title">十神</view>
      <text
        class="ganzhi_content"
        v-for="(item, index) in baziShishen"
        :key="index"
        >{{ item }}</text
      >
    </view>
    <view class="ganzhi_item" style="background-color: #f6f6f6">
      <view class="ganzhi_title">天干</view>
      <view
        class="ganzhi_content"
        v-for="(item, index) in tiangan"
        :key="index"
      >
        <view :style="fiveElementInfo(item).color">{{
          item
        }}</view>
        <image
          class="element-icon"
          :src="fiveElementInfo(item).img"
        ></image>
      </view>
    </view>
    <view class="ganzhi_item">
      <view class="ganzhi_title">地支</view>
      <view
        class="ganzhi_content"
        v-for="(item, index) in dizhi"
        :key="index"
      >
        <view :style="fiveElementInfo(item).color">{{ item }}</view>
        <image
          class="element-icon"
          :src="fiveElementInfo(item).img"
        ></image>
      </view>
    </view>
    <view class="ganzhi_item" style="background-color: #f6f6f6">
      <view class="ganzhi_title">藏干</view>
      <view
        class="ganzhi_content"
        v-for="(item, index) in canggan"
        :key="index"
        ><view v-for="(e, i) in item.split(',')" :key="i">{{ e }}</view></view
      >
    </view>
    <view class="ganzhi_item">
      <view class="ganzhi_title cangganshishen_title">
        <view>藏干</view>
        <view>十神</view>
      </view>
      <text
        class="ganzhi_content ganzhi_content_cangganShishen"
        v-for="(item, index) in cangganShishen"
        :key="index"
        ><view v-for="(e, i) in item" :key="i">{{ e }}</view></text
      >
    </view>
    <view class="ganzhi_item" style="background-color: #f6f6f6">
      <view class="ganzhi_title">星运</view>
      <view
        class="ganzhi_content"
        v-for="(item, index) in dishi"
        :key="index"
        >{{ item }}</view
      >
    </view>
    <view class="ganzhi_item">
      <view class="ganzhi_title">自坐</view>
      <view
        class="ganzhi_content"
        v-for="(item, index) in zizuo"
        :key="index"
        >{{ item }}</view
      >
    </view>
    <view class="ganzhi_item" style="background-color: #f6f6f6">
      <view class="ganzhi_title">纳音</view>
      <view
        class="ganzhi_content"
        v-for="(item, index) in nayin"
        :key="index"
        >{{ item }}</view
      >
    </view>
    <view class="ganzhi_item">
      <view class="ganzhi_title">空亡</view>
      <view
        class="ganzhi_content"
        v-for="(item, index) in kongwang"
        :key="index"
        >{{ item }}</view
      >
    </view>
    <view class="ganzhi_item" style="background-color: #f6f6f6">
      <view class="ganzhi_title">神煞</view>
      <text
        class="ganzhi_content ganzhi_content_shensha"
        v-for="(item, index) in shensha"
        :key="index"
        ><view v-for="(e, i) in item" :key="i">{{ e }}</view></text
      >
    </view>
  </view>
</template>

<script>
  import wuxingColor from '@/utils/wuxing.js'
  export default {
    props: {
      result: {
        type: Object,
        default: {}
      }
    },
    data() {
      return {
        baziResult: this.result,
        shizhu: ["时间", "年柱", "月柱", "日柱", "时柱"],
        baziShishen: [],
        tiangan: [],
        dizhi: [],
        canggan: [],
        cangganShishen: [],
        dishi: [],
        zizuo: [],
        nayin: [],
        kongwang: [],
        shensha: []
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.baziShishen = [this.baziResult.yearGanShiShen, this.baziResult.monthGanShiShen, this.baziResult
          .dayGanShiShen, this.baziResult.timeGanShiShen
        ];
        this.tiangan = [this.baziResult.yearGan, this.baziResult.monthGan, this.baziResult.dayGan, this.baziResult
          .timeGan
        ];
        this.dizhi = [this.baziResult.yearZhi, this.baziResult.monthZhi, this.baziResult.dayZhi, this.baziResult
          .timeZhi
        ];
        this.canggan = [this.baziResult.yearCangGan, this.baziResult.monthCangGan, this.baziResult.dayCangGan, this
          .baziResult.timeCangGan
        ];
        this.cangganShishen = [this.baziResult.yearZhiShiShen, this.baziResult.monthZhiShiShen, this.baziResult
          .dayZhiShiShen, this.baziResult.timeZhiShiShen
        ];
        this.dishi = [this.baziResult.yearDiShi, this.baziResult.monthDiShi, this.baziResult.dayDiShi, this
          .baziResult.timeDiShi
        ];
        this.zizuo = [this.baziResult.yearZiZuo, this.baziResult.monthZiZuo, this.baziResult.dayZiZuo, this
          .baziResult.timeZiZuo
        ];
        this.nayin = [this.baziResult.yearNaYin, this.baziResult.monthNaYin, this.baziResult.dayNaYin, this
          .baziResult.timeNaYin
        ];
        this.kongwang = [this.baziResult.yearXunKong, this.baziResult.monthXunKong, this.baziResult.dayXunKong, this
          .baziResult.timeXunKong
        ];
        this.shensha = [this.baziResult.yearShenSha, this.baziResult.monthShenSha, this.baziResult.dayShenSha, this
          .baziResult.timeShenSha
        ];
      })
    },
    methods: {
      // 对应五行信息
      fiveElementInfo(str) {
        let {
          color,
          img
        } = wuxingColor.getGanzhiWuxingColorInfo(str);
        return {
          color: `color: ${color}`,
          img: `/static/images/bazi/fortune/${img}`,
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
.ganzhi-containter {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ganzhi_item {
  display: flex;
  flex-direction: row;
}

.ganzhi_title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bolder;
  color: #808080;
  font-size: 28rpx;
  line-height: 56rpx;
  flex: 1 0;
}
.cangganshishen_title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ganzhi_content {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4b240d;
  flex: 1 0;
  font-size: 24rpx;
  line-height: 58rpx;
  font-weight: bold;
}
.element-icon {
  width: 36rpx;
  height: 36rpx;
}

.ganzhi_content_cangganShishen {
  line-height: 38rpx;
}

.ganzhi_content_shensha {
  line-height: 38rpx;
  text-align: center;
}
</style>